<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>注册-语雀</title>
        <style type="text/css">
            .wrapper{width: 400px;height: 580px;margin: 30px auto;background-color: #fff;padding: 40px 8px 16px;
                margin-bottom: 64px;border: 1px solid #e9e9e9;border-radius: 4px;
            }
            .logo{
                max-width: 320px;
                margin: 0 auto;
                text-align: center;
                padding-bottom: 20px;
            }
            img{
                vertical-align: middle;border-style: none;width: 70px;height: 70px}
            .slogin{width: 320px;height: 73px;text-align: center;margin-bottom: 32px;margin-left: 40px;margin-top: -10px}
            .bigword{    font-size: 32px;color: #262626;}
            .smallword{color: #595959;margin-top: 8px;font-size: 18px;margin-top: -30px}
            .button1{width: 320px;height: 45.45px}
            .button-option{width: 88px;height: 46px;color: #595959;margin-left: 40px;font-size: 18px;border: 1px solid #e9e9e9;border-top-left-radius: 4px;
            border-bottom-left-radius: 4px}
            .text{width: 240px;height: 42px;font-size: 18px;text-align: left;float: right;margin-right: -49px;margin-top: -46px;
                border: 1px solid #e9e9e9;border-top-right-radius: 4px;border-bottom-right-radius: 4px;color: #f3f3f3;opacity: 0.5;
            }
            .button2{width: 320px;height: 56px;}
            .text2{width: 188px;height: 40px;font-size: 18px;opacity: 0.5;outline: none;margin-top: 15px;margin-left: 40px; }
            .code{opacity: 0.8;float: right;width: 123px;height: 46px;margin-top:15px;margin-right: -40px;font-size: 14px;color:black}
            .register{width: 320px;height: 45px;background: #09aa5c;color: white;font-size: 18px;opacity: 0.9;margin-left: 40px;margin-top: 30px;border-radius: 4px;}
            .xieyi{width: 320px;height: 21px;margin-top: 90px;margin-left: 70px;color: #b9b9b9
            }
            a:link{color: dodgerblue;text-decoration: none;}
            .login-link{width: 290px;height: 40px;margin-top: 60px;margin-left: 50px;}
            .ding{border-radius: 50% 50%;width: 28px;height: 29px;
            background-image: url("ding.png");background-position:center ;margin-left: 50px;background-position: center;
            }
            .zhi{border-radius: 50% 50%;width: 28px;height: 29px;
                background-image: url("zhi.png");background-position:center ;float: left;margin-top: -29px;margin-left: 110px;background-position: center;
            }
            .wechat{border-radius: 50% 50%;width: 28px;height: 29px;
                background-image: url("wechat.png");background-position:center ;float: left;margin-top: -29px;margin-left: 170px;background-position: center;
            }
            .ti{border-radius: 50% 50%;width: 28px;height: 29px;
                background-image: url("te.png");background-position:center ;float: left; left;margin-top: -29px;margin-left: 230px;background-position: center;
            }
            .login{width: 320px;height: 21.36px;font-size: 16px;text-align: center;margin-top: 30px;margin-left: 40px;color: #19a0f0;
            }
            .login1{width:120px;height:19px;border-right:1px solid gainsboro ;margin-left: 50px}
            .login2{float: right;margin-top: -19px;margin-right: 60px}
        </style>
    </head>
    <body>
        <div class="wrapper">
            <a href="https://www.yuque.com/">
            <div class="logo">
                <img src="https://gw.alipayobjects.com/mdn/prod_resource/afts/img/A*FsnmRIiTfe0AAAAAAAAAAABkARQnAQ">
            </div>
            </a>
            <div class="slogin">
                <p class="bigword">语雀</p>
                <p class="smallword">专业的云端知识库</p>
            </div>
                <div class="button1">
                    <div >
                       <select class="button-option">
                        <option >&nbsp;&nbsp;&nbsp;+86</option>
                        <option >+186中国</option>
                        <option >+528中国香港</option>
                       </select>
                    </div>
                        <div>
                            <input type="text" class="text" placeholder="&nbsp;&nbsp;&nbsp;手机号">
                        </div>
                </div>
                                    <div class="button2">
                                        <input type="text" placeholder="&nbsp;6&nbsp;位短信验证码" class="text2">
                                        <button class="code">获取短信验证码</button>
                                        <button class="register" type="submit">快速注册</button>
                                    </div>
            <div class="xieyi">
                注册即表明同意
                <a href="https://www.yuque.com/terms" >《语雀服务协议》</a>
            </div>
            <div class="login-link" >
                <div class="ding"> </div>
                <div class="zhi"></div>
                <div class="wechat"></div>
               <div class="ti"></div>
            </div>
            <div class="login">
                <div class="login1">直接登入</div>
                <div class="login2">遇到问题</div>
            </div>
        </div>
    </body>
</html>